HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Number Game</title>
<!-- 引用外部的 CSS 文件設計頁面樣式 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>Guess the Number!</h1>
<!-- 顯示遊戲提示和結果的區域 -->
<p id="message">Guess a number between 1 and 100</p>
<!-- 輸入框,讓玩家輸入他們的猜測 -->
<input type="number" id="guess-input" placeholder="Enter your guess">
<!-- 提交猜測按鈕 -->
<button onclick="submitGuess()">Submit Guess</button>
<!-- 顯示已經猜過的數字 -->
<p>Previous guesses: <span id="previous-guesses"></span></p>
<!-- 重玩遊戲按鈕(開始遊戲時是隱藏的) -->
<button id="restart-button" onclick="restartGame()" style="display:none;">Restart Game</button>
</div>
<!-- 引用外部的 JavaScript 文件來處理遊戲邏輯 -->
<script src="script.js"></script>
</body>
</html>
JavaScript
// 初始化變數
let randomNumber = Math.floor(Math.random() * 100) + 1; // 隨機生成1到100之間的數字
let guesses = []; // 儲存玩家的猜測
let maxGuesses = 10; // 設定玩家最多可以猜10次
// 提交玩家的猜測
function submitGuess() {
const guessInput = document.getElementById('guess-input'); // 取得輸入框
const message = document.getElementById('message'); // 取得顯示消息的元素
const previousGuesses = document.getElementById('previous-guesses'); // 取得顯示歷史猜測的元素
const guess = Number(guessInput.value); // 獲取玩家輸入的猜測
// 驗證玩家的輸入是否合法(1到100之間)
if (guess < 1 || guess > 100 || isNaN(guess)) {
message.textContent = 'Please enter a valid number between 1 and 100.';
return;
}
guesses.push(guess); // 將猜測加入猜測數組
previousGuesses.textContent = guesses.join(', '); // 更新顯示之前的猜測
// 判斷猜測結果
if (guess === randomNumber) {
message.textContent = `Congratulations! You guessed it right in ${guesses.length} tries.`;
endGame();
} else if (guesses.length === maxGuesses) {
message.textContent = `Game over! The correct number was ${randomNumber}.`;
endGame();
} else if (guess < randomNumber) {
message.textContent = 'Too low! Try again.';
} else {
message.textContent = 'Too high! Try again.';
}
// 清空輸入框
guessInput.value = '';
}
// 結束遊戲,禁用輸入和顯示重玩按鈕
function endGame() {
const guessInput = document.getElementById('guess-input');
const restartButton = document.getElementById('restart-button');
// 禁用輸入框
guessInput.disabled = true;
// 顯示重玩按鈕
restartButton.style.display = 'block';
}
// 重啟遊戲
function restartGame() {
// 重設變數
randomNumber = Math.floor(Math.random() * 100) + 1;
guesses = [];
// 重置訊息與顯示
document.getElementById('message').textContent = 'Guess a number between 1 and 100';
document.getElementById('previous-guesses').textContent = '';
document.getElementById('guess-input').disabled = false;
document.getElementById('restart-button').style.display = 'none';
}
CSS
/* 頁面基本樣式 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 遊戲容器的樣式 */
.game-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
/* 標題樣式 */
h1 {
margin-bottom: 20px;
}
/* 輸入框樣式 */
input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* 按鈕樣式 */
button {
padding: 10px;
width: 100%;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
/* 已經猜過的數字區域樣式 */
#previous-guesses {
margin-top: 10px;
font-size: 14px;
}